import React, { Component } from "react";
import "./Footer.css";

class Footer extends Component {
  state = {
    footerarr: [
      { title: "关于我们", checked: false },
      { title: "联系我们", checked: false },
      { title: "招聘简介", checked: false },
      { title: "企业文化", checked: false },
      { title: "企业地址", checked: false },
    ],
    index: 0,
  };

  changeFooter = (i) => {
    return () => {
      // console.log(this.state);

      // console.log(newFooterarr);
      let newFooterarr = this.state.footerarr;

      newFooterarr[this.state.index].checked = false;

      newFooterarr[i].checked = true;

      this.setState({
        footerarr: newFooterarr,
        index: i,
      });
    };
  };

  render() {
    let { footerarr } = this.state;

    return (
      <div className="footer">
        <ul>
          {footerarr.map((item, index) => {
            return (
              <li
                key={index}
                className={item.checked ? "activeF" : null}
                onClick={this.changeFooter(index)}
              >
                {item.title}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Footer;
